<template>
  <ContentLayout>
    <SearchBox :title="'数据模型'" :singleLine="true" @handleQuery="handleQuery" @resetQuery="resetQuery">
      <template slot="form">
        <el-form class="search-form" ref="searchForm" :model="searchForm" label-width="auto" size="medium">
          <el-form-item label="模型名称">
            <el-input v-model="searchForm.name" placeholder="请输入模型名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </template>
    </SearchBox>

    <EvTable
      ref="table"
      :options="{ data, columns, height: '750' }"
      :rowDropElement="'.drag-btn'"
      :tablePage="page"
      :columnChangeSave="true"
      @handlePageChange="handlePageChange"
    >
      <template #toolbar_buttons>
        <EvButton icon="el-icon-plus" type="primary" @click="handleAdd">新增</EvButton>
        <EvButton icon="el-icon-delete" type="info" @click="batchDelete">删除</EvButton>
      </template>
      <template #operation_default="{ scope }">
        <el-button type="text" @click="edit(scope)">编辑</el-button>
        <!-- <el-button type="text" @click="preview(scope)">预览</el-button> -->
      </template>
      <template #time_default="{ scope }">
        {{ `${scope.row.insertTime} - ${scope.row.updateTime}` }}
      </template>
    </EvTable>
    <!-- 详情 -->
    <Detail ref="detail" :drawerTitle="drawerTitle" @handleDialogConfirm="refresh"></Detail>
  </ContentLayout>
</template>
<script>
import ContentLayout from "@/layout/contentLayout.vue";
import SearchBox from "@/components/EvTable/searchBox.vue";
import Detail from "./detail.vue";
import { getRemoteSchemaList } from "@/utils/schema";
export default {
  components: {
    ContentLayout,
    SearchBox,
    Detail,
  },
  data() {
    return {
      microservices: "function-quality",
      resource: "JsonSchemaData",
      /* 搜索项表单 */
      searchForm: {
        name: null,
      },
      commonSearch: null,
      selectRecords: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
      },
      columns: [
        { type: "checkbox", align: "center", width: 50 },
        { title: "序号", align: "center", width: 60, type: "seq" },
        { title: "模型名称", field: "name", align: "left" },
        { title: "模型编号", field: "code", align: "left" },
        { title: "创建时间", field: "insertTime", align: "left" },
        { title: "更新时间", field: "updateTime", align: "left" },
        {
          title: "操作",
          field: "table_operate",
          fixed: "right",
          align: "left",
          width: 100,
          resizable: false,
          slots: { default: "operation_default" },
        },
      ],
      data: [],
      /** 详情 */
      drawerTitle: "识别详情",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handleAdd() {
      this.drawerTitle = "新增数据模型";
      this.$refs.detail.open();
    },

    edit(scope) {
      this.drawerTitle = "编辑数据模型";
      this.$refs.detail.openDetail(scope.row.id);
    },
    preview(scope) {
      this.drawerTitle = "预览表单生成";
      this.$refs.preview.openDetail(scope.row.id);
    },
    // 表格删除
    batchDelete() {
      let selectedRows = this.$refs.table.getSelectRecords();
      if (selectedRows && selectedRows.length == 0) {
        this.$message.warning(this.$t("common.common_unselect_data"));
        return;
      }
      this.$confirm(this.$t("common.common_delete_remind"), this.$t("common.common_info"), {
        confirmButtonText: this.$t("common.common_ok"),
        cancelButtonText: this.$t("common.common_operation_cancel"),
        type: "warning",
      })
        .then(() => {
          this.$server()
            .batchDelete(this.microservices, this.resource, selectedRows)
            .then(() => {
              this.$message.success(this.$t("common.common_delete_success"));
              this.handleQuery();
            })
            .catch((response) => {
              this.$message.error(response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("common.common_cancel_delete"),
          });
        });
    },
    // 执行搜索
    handleQuery() {
      this.page.currentPage = 1;
      this.loadData();
    },
    refresh() {
      this.updateFieldModel();
      this.loadData();
    },
    // 更新字段模型
    async updateFieldModel() {
      const schemaList = await getRemoteSchemaList();
      this.$store.commit("schema/UPDATE_SCHEMA", schemaList);
    },
    resetQuery() {
      this.searchForm = {
        name: null,
        code: null,
      };
      this.page.currentPage = 1;
      this.loadData();
    },
    // 获取策略属性名称
    getStrategyPropertyName(property) {
      return this.strategyPropertyEnums.find((item) => item.value === property)?.name;
    },
    // 加载数据
    loadData() {
      let params = [];
      Object.keys(this.searchForm).forEach((el) => {
        if (this.searchForm[el]) {
          params.push([el, "LIKE", `%${this.searchForm[el]}%`]);
        }
      });
      if (params.length > 0) {
        this.commonSearch = { AND: [...params] };
      } else {
        this.commonSearch = null;
      }
      let condition = null;
      if (this.commonSearch && JSON.stringify(this.commonSearch) != "{}") {
        let common = JSON.parse(JSON.stringify(this.commonSearch));
        if (!condition) {
          condition = { AND: [] };
        }
        condition.AND = [...condition.AND, ...common.AND];
      }
      this.$server()
        .query(
          this.microservices,
          this.resource,
          condition,
          "insertTime desc",
          { current: this.page.currentPage, size: this.page.pageSize },
          true
        )
        .then((response) => {
          this.page.total = response.total;
          this.data = response.list;
        })
        .catch((response) => {
          this.$message.error(response.data.message);
        });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.loadData();
    },
  },
};
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    margin-bottom: 10px;
  }
}
.property-item {
  padding: 0 15px;
  line-height: 28px;
  color: #fff;
  border-radius: 14px;
  width: 70px;
}

.property-NORMAL {
  background-color: #53c77b;
}

.property-WARNING {
  background-color: #f3c126;
}

.property-ERROR {
  background-color: #ec5758;
}

.property-INFO {
  background-color: #439ef1;
}

.property-NONE {
  background-color: #a9bcc8;
}
.drag-btn {
  cursor: move;
  font-size: 16px;
}
</style>
